<!-- 模板 -->
<template>
  <div class="root">
    <div>
      <van-search v-model="SearchVal" shape="round" placeholder="请输入搜索关键词" />
      <van-row>
        <van-col v-for="item in getlist" :key="item.id">
          <div class="item">
            <img :src="item.src" alt="" /><span>{{ item.title }}</span>
          </div>
        </van-col>
      </van-row>
      <div class="classroom">
        <div class="classroom-one" v-for="item in geicoil" :key="item.id">
          <img :src="item.src" alt="" />
        </div>
        <div class="classroom-img">
          <img :src="item.src" alt="" v-for="item in getter" :key="item.id" />
        </div>
      </div>
      <div class="charge">
        <div class="free">
          <p>免费课程</p>
          <div class="times">
            <span>距结束</span>
            <van-count-down :time="time">
              <template #default="timeData">
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
              </template>
            </van-count-down>
          </div>
        </div>
        <div class="apply" v-for="item in dye" :key="item.id">
          <div class="apply-call">
            <img :src="item.src" alt="" />
          </div>
          <div class="apply-key">
            <p>{{ item.title }}</p>
            <div class="experience">{{ item.titles }}</div>
            <div class="price">
              <span><i>￥</i>0</span>
              <div>去报名</div>
            </div>
          </div>
        </div>
      </div>
      <div class="public">
        <div class="free">
          <p>自研公开课</p>
        </div>
        <div class="publicity" v-for="item in course" :key="item.id">
          <div class="publicity-not">
            <img :src="item.src" alt="" />
          </div>
          <div class="publicity-course">
            <p>{{ item.title }}</p>
            <div class="brain">{{ item.names }}</div>
            <span>{{ item.titles }}</span>
          </div>
        </div>
      </div>
      <Footers :index1="index1"></Footers>
    </div>
  </div>
</template>
<script>
import request from '../utils/request.js'
import Footers from './Footers.vue'
export default {
  name: '',
  data() {
    return {
      SearchVal: '',
      time: 30 * 60 * 60 * 1000,
      id: 0,
      index1: 0,
      getlist: [],
      geicoil: [],
      getter: [],
      dye: [],
      course: [],
    }
  },
  props: [],
  components: { Footers },
  computed: {},
  filters: {},
  methods: {
    async validcode() {
      let option = {
        url: 'in',
        type: 'get',
        data: {
          id: this.id,
        },
      }
      try {
        let { data: res } = await request(option)
        if (res.meta.status !== 200) {
          return
        }
        this.getlist = res.data.slice(0, 5)
        this.geicoil = res.data.slice(5, 6)
        this.getter = res.data.slice(6, 8)
        this.dye = res.data.slice(8, 9)
        this.course = res.data.slice(9, 11)
      } catch (error) {
        console.log(error)
      }
    },
  },
  created() {},
  mounted() {
    this.validcode()
  },
}
</script>
<style lang="less" scoped>
.root {
  width: 100%;
  background: #f7f7f7;
  .van-search {
    width: 100%;
    padding: 0.2rem 0.24rem;
    /deep/.van-search__content {
      border-radius: 1rem;
      padding-left: 0;
      .van-cell {
        padding: 0.1rem 0.16rem 0.1rem 0;
        .van-cell__value {
          .van-field__body {
            input {
              padding-left: 0.6rem;
              background: #f7f7f7;
            }
            input::-webkit-input-placeholder {
              color: rgb(145, 141, 141);
              text-align: center;
              font-size: 0.28rem;
            }
          }
        }
        .van-field__left-icon {
          position: relative;
          .van-icon {
            position: absolute;
            left: 0.1rem;
            z-index: 5;
            font-size: 0.36rem;
            padding-left: 0.1rem;
          }
        }
      }
    }
  }
  .van-row {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .van-col {
      .item {
        width: 100%;
        display: flex;
        padding: 0.2rem 0;
        flex-direction: column;
        align-items: center;
        img {
          width: 0.7rem;
        }
        span {
          padding-top: 0.1rem;
          font-size: 0.26rem;
        }
      }
    }
  }
  .van-row::after {
    display: none;
  }
  .classroom {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 0.3rem;
    margin-top: 0.1rem;
    .classroom-one {
      width: 50%;
      img {
        width: 3.8rem;
        padding: 0 0.2rem;
      }
    }
    .classroom-img {
      width: 50%;
      display: flex;
      flex-direction: column;
      img {
        width: 3.5rem;
      }
      img:nth-of-type(2) {
        padding-top: 0.2rem;
      }
    }
  }
  .charge {
    margin: 0.26rem;
    background: #fff;
    border-radius: 0.2rem;
    .free {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.2rem;
      p {
        font-size: 0.34rem;
        font-weight: bold;
      }
      .times {
        display: flex;
        align-items: center;
        span {
          font-size: 0.26rem;
        }
        .van-count-down {
          font-size: 0.28rem;
          line-height: 0.42rem;
          .block {
            width: 0.44rem;
          }
          .colon {
            margin: 0 0.08rem;
          }
        }
      }
    }
    .apply {
      display: flex;
      width: 100%;
      .apply-call {
        width: 33.333%;
        padding-left: 0.2rem;
        img {
          width: 100%;
        }
      }
      .apply-key {
        padding-left: 0.1rem;
        width: 66.666%;
        display: flex;

        flex-direction: column;
        p {
          font-size: 0.34rem;
          padding-top: 0.1rem;
        }
        .experience {
          color: #999999;
          font-size: 0.28rem;
          padding-top: 0.03rem;
        }
        .price {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-top: 0.4rem;
          span {
            font-size: 0.4rem;
            color: red;
            i {
              font-size: 0.26rem;
              color: red;
              font-style: normal;
            }
          }
          div {
            width: 1.2rem;
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            background-color: #fc1e1e;
            color: #fff;
            cursor: pointer;
            font-size: 0.3rem;
            border-radius: 0.4rem;
            margin-right: 0.2rem;
          }
        }
      }
    }
  }
  .public {
    background: #fff;
    margin: 0 0.26rem 1.26rem 0.26rem;
    border-radius: 0.2rem;
    .free {
      padding: 0.2rem;
      p {
        font-size: 0.34rem;
        font-weight: bold;
      }
    }
    .publicity {
      display: flex;
      width: 100%;
      .publicity-not {
        width: 40%;
        padding-left: 0.2rem;
        img {
          width: 100%;
        }
      }
      .publicity-course {
        display: flex;
        width: 60%;
        flex-direction: column;
        padding-left: 0.1rem;
        p {
          font-size: 0.32rem;
          padding-top: 0.1rem;
        }
        .brain {
          color: #999999;
          padding-top: 0.03rem;
          font-size: 0.28rem;
        }
        span {
          color: #999999;
          font-size: 0.24rem;
          padding-top: 0.4rem;
        }
      }
    }
  }
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: red;
  font-size: 12px;
  text-align: center;
  background-color: #f6f6f6;
}
</style>
